<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>直播中心</title>
		<link rel="stylesheet" type="text/css" href="./css/public.css"/>
		<link rel="stylesheet" type="text/css" href="./css/swiper-bundle.min.css"/>
		<link rel="stylesheet" type="text/css" href="./css/livelist.css"/>
	</head>
	<body>
	  <div class="swiper-container banner-container">
		<div class="swiper-wrapper">
		  <div class="swiper-slide"><a href="#"><img src="img/livelist_banner.jpg" /></a></div>
		  <div class="swiper-slide"><a href="#"><img src="img/livelist_banner.jpg" /></a></div>
		  <div class="swiper-slide"><a href="#"><img src="img/livelist_banner.jpg" /></a></div>
		</div>
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-pagination swiper-pagination-bullets"></div>
	  </div>
		<div class="main">
			<div class="navlist">
				<ul class="clearfix">
					<li><a href="#" target="_blank">正在直播</a></li>
					<li><a href="#" target="_blank">一级建造师</a></li>
					<li><a href="#" target="_blank">二级建造师</a></li>
					<li><a href="#" target="_blank">一级造价工程师</a></li>
					<li><a href="#" target="_blank">二级造价工程师</a></li>
					<li><a href="#" target="_blank">注册安全工程师</a></li>
					<li><a href="#" target="_blank">监理工程师</a></li>
					<li><a href="#" target="_blank">咨询工程师</a></li>
					<li><a href="#" target="_blank">执业药师</a></li>
					<li><a href="#" target="_blank">健康管理师</a></li>
					<li><a href="#" target="_blank">公共营养师</a></li>
					<li><a href="#" target="_blank">ACI注册营养师</a></li>
					<li><a href="#" target="_blank">护士资格证</a></li>
					<li><a href="#" target="_blank">消防设施操作员</a></li>
					<li><a href="#" target="_blank">消防工程师</a></li>
					<li><a href="#" target="_blank">人力资源师</a></li>
					<li><a href="#" target="_blank">执业药师</a></li>
					<li><a href="#" target="_blank">健康管理师</a></li>
					<li><a href="#" target="_blank">公共营养师</a></li>
					<li><a href="#" target="_blank">ACI注册营养师</a></li>
				<ul>
			</div>	
			<div class="navtime">
				<span><b>11</b>月</span>
			</div>
			<div class="itemwrap">
				<div class="item item-on clearfix">
					<div class="item-time">
						<p>10月28日 周三</p>
						<p>19:30-21:30</p>
					</div>
					<div class="item-info">
						<img class="item-pic" src="img/livelist_teacher.png">
						<p class="item-title">2020年二级建造师《案例分析》考前冲刺直播</p>
						<p class="item-name">主讲人：蒋欢</p>
						<p class="item-type">
							<span>付费</span>
							<span>不过退费</span>
						</p>
					</div>
					<div class="item-tool">
						<p>109人正在学习</p>
						<a href="javascript:;">马上预约</a>
					</div>
				</div>
				<div class="item clearfix">
					<div class="item-time">
						<p>10月28日 周三</p>
						<p>19:30-21:30</p>
					</div>
					<div class="item-info">
						<img class="item-pic" src="img/livelist_teacher.png">
						<p class="item-title">2020年二级建造师《案例分析》考前冲刺直播</p>
						<p class="item-name">主讲人：蒋欢</p>
						<p class="item-type">
							<span>付费</span>
							<span>不过退费</span>
						</p>
					</div>
					<div class="item-tool">
						<p>109人正在学习</p>
						<a href="javascript:;">马上预约</a>
					</div>
				</div>
				<div class="item clearfix">
					<div class="item-time">
						<p>10月28日 周三</p>
						<p>19:30-21:30</p>
					</div>
					<div class="item-info">
						<img class="item-pic" src="img/livelist_teacher.png">
						<p class="item-title">2020年二级建造师《案例分析》考前冲刺直播</p>
						<p class="item-name">主讲人：蒋欢</p>
						<p class="item-type">
							<span>付费</span>
							<span>不过退费</span>
						</p>
					</div>
					<div class="item-tool">
						<p>109人正在学习</p>
						<a href="javascript:;">马上预约</a>
					</div>
				</div>
			</div>
		</div>
		<div class="mask"></div>
		<div class="pop pop1">
			<h2>温馨提示<a href="javascript:;">×</a></h2>
			<p class="p1"><img src="img/livelist_icon05.png"> 预约成功</p>
			<img class="qrcode" src="img/livelist_qrcode.png"> 
			<p class="p2">直播开始发送消息通知<br>使用APP观看效果更佳</p>
		</div>
		<div class="pop pop2">
			<h2>温馨提示<a href="javascript:;">×</a></h2>
			<p>抱歉，此直播只针对报名该直播班的组合 班级学员开放</p>
			<a class="lj" href="#" target="_target">去了解课程</a>
		</div>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/swiper-bundle.min.js"></script>
	<script>
		//banner
		var swiper = new Swiper('.banner-container', {
			pagination: {
				el: '.swiper-pagination',
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
		   
		});
  
		//马上预约
		$(".item-tool a").click(function (){
			$(".mask,.pop1").fadeIn();
		})
		
		//关闭弹框
		$(".pop h2 a").click(function (){
			$(".mask").fadeOut();
			$(this).parents(".pop").fadeOut();
		})
	</script>
	</body>
</html>
